<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03_计算属性和监视</title>
  </head>
  <body>
    <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
    -->
    <div id="app">
      姓: <input type="text" placeholder="First Name" /><br />
      名: <input type="text" placeholder="Last Name" /><br />
      姓名1: <input type="text" placeholder="Full Name1" /><br />
      姓名2: <input type="text" placeholder="Full Name2" /><br />

      <p>{{num}}</p>
      <button @click="handleClick">按钮1</button>

      <p>{{person.age}}</p>
      <button @click="updateAge">按钮2</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          firstName: "xiong",
          lastName: "jia",
          num: 0,
          person: {
            age: 0,
          },
        },
        methods: {
          handleClick() {
            this.num++;
          },
          updateAge() {
            this.person.age++;
          },
        },
        computed: {
          fullName1() {
            return this.firstName + " " + this.lastName;
          },
          fullName2: {
            get() {
              return this.firstName + " " + this.lastName;
            },
            set() {
              const [firstName, lastName] = val.split("")
              this.firstName = firstName
              this.lastName = lastName
            },
          },
        },
        watch:{
          person:{
            handler(newVal,oldVal){
              console.log(newVal,oldVal);
            },
            deep:true 
          }
        }
      });
    </script>
  </body>
</html>
